<template>
    <div id="navigation">
        <div id="nav">
            <div id="local">
              <div id="loginnav-left" v-if = "$store.state.isLogin">
                <router-link to="/">淘淘欢迎您！{{$store.state.username}}</router-link>
                <div>|</div>
                 <span @click="logout" style="cursor: pointer">退出登录</span>
              </div>
              <div id="logoutnav-left" v-else>
                <router-link to="/login">你好，请登录</router-link>
                <div>|</div>
                <router-link to="/register">注册</router-link>
                <div>|</div>
                <!-- <a href="http://localhost:8000/admin" target="_blank">管理员登录</a> -->
                <a href="http://39.104.170.158:8000/admin" target="_blank">管理员登录</a> 
              </div>
            </div>
            <div id="func">
              <div id="loginnav" v-if = "$store.state.isLogin">
                <router-link to="/">主页</router-link>
                <div>|</div>
                <router-link to="/myCart">我的购物车</router-link>
                <div>|</div>
                <router-link to="/myOrder">我的订单</router-link>
                <div>|</div>
                <router-link to="/myMsg">我的消息</router-link>
                <div>|</div>
                <router-link :to="{path: '/mySpace', query: {msg: 1}}">我的淘淘</router-link>
              </div>
              <div id="logoutnav" v-else>
                
                <router-link to="/">主页</router-link>
                <div>|</div>
                <span @click="gotologin">我的购物车</span>
                <div>|</div>
                <span @click="gotologin">我的订单</span>
                <div>|</div>
                <span @click="gotologin">我的消息</span>
                <div>|</div>
                <span @click="gotologin">我的淘淘</span>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
import { request } from '../network/request';
export default {
  name: 'navigation',
  methods: {
    gotologin(){
      this.$router.push({path: '/login'});
    },
    logout(){
      this.$store.commit('logout');
      this.$router.push({path: '/'});
      request({
        url:'/',
        method: 'post'
      }).then(res => {
        if(res.data.res == 1){
          this.$message({
            message: "退出登录成功！",
            type: "success",
        })
        }
      })
    },
  }
}
</script>

<style scoped>

#navigation {
  display: flex;
  flex-direction: column;
}

#nav {
  padding: 15px;
  background-color: rgb(232,232,232);
  padding-left: 5%;
  padding-right: 5%;
}

#nav {
  display: flex;
  justify-content: space-between;
}

#loginnav, #logoutnav {
  width: 500px;
  display: flex;
  justify-content: space-around;
}

#logoutnav span{
  cursor: pointer;
  color: #2c3e50;
}

#loginnav span {
  cursor: pointer;
  color: #2c3e50;
}

#loginnav a, #logoutnav a {
  font-weight: normal;
}

#loginnav-left, #logoutnav-left {
  display: flex;
  justify-content: space-around;
  width: 300px;
}

a, span{
  font-size: 14px;
}

</style>

